<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优雅草科技·大屏开发·可视化数据大屏开发</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shorthandcss@1.1.1/dist/shorthand.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:200,300,400,500,600,700,800,900&display=swap" />
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
</head>

<body class="bg-black muli">
    <nav class="w-100pc flex flex-column md-flex-row md-px-10 py-5 bg-black" id="nav-top">
        <div class="flex justify-between">
            <a href="#" class="flex items-center p-2 mr-4 no-underline">
                <img class="max-h-l2 w-auto" src="https://songshu.youyacao.com/qingtingz/static/picture/logo-transparent.png" />
            </a>
            <a data-toggle="toggle-nav" data-target="#nav-items" href="#"
                class="flex items-center ml-auto md-hidden indigo-lighter opacity-50 hover-opacity-100 ease-300 p-1 m-3">
                <i data-feather="menu"></i>
            </a>
        </div>
        <div id="nav-items" class="hidden flex sm-w-100pc flex-column md-flex md-flex-row md-justify-end items-center">
            <a href="#home" class="fs-s1 mx-3 py-3 indigo no-underline hover-underline">首页</a>
            <a href="#features" class="fs-s1 mx-3 py-3 indigo no-underline hover-underline">大屏未来</a>
            <a href="#pricing" class="fs-s1 mx-3 py-3 indigo no-underline hover-underline">应用场景</a>
        
        </div>
    </nav>

    <!-- hero section -->
    <section id="home" class="min-h-100vh flex justify-start items-center">
        <div class="mx-5 md-mx-l5">
            <div class="inline-block br-round bg-indigo-30 indigo-lightest p-2 fs-s2 mb-5">
                <div class="inline-block bg-indigo indigo-lightest br-round px-3 py-1 mr-3 fs-s3">开始制作大屏</div>
                现在就来告诉我们您的大屏需求
            </div>
            <div>
                <h1 class="white fs-l3 lh-2 md-fs-xl1 md-lh-1 fw-900 ">建造您的 <br />定制数据大屏</h1>
<!-- 
                <div class="br-8 mt-10 inline-flex">
                    <input type="text"
                        class="input-lg half bw-0 fw-200 bg-indigo-lightest-10 white ph-indigo-lightest focus-white opacity-80 fs-s3 py-5 min-w-25vw br-r-0"
                        placeholder="Email Address">
                    <button
                        class="button-lg bg-indigo-lightest-20 indigo-lightest focus-white fw-300 fs-s3 mr-0 br-l-0">Get
                        Started</button>
                </div>
                <div class="white opacity-20 fs-s3 mt-3">No credit card required</span> -->
            </div>
        </div>
        </div>
    </section>

    <!-- features -->
    <section id="features" class="p-10 md-p-l5">
        <div class="flex flex-column md-flex-row mx-auto">
            <div class="w-100pc md-w-40pc">
                <div class="br-8 p-5 m-5">
                    <div class="flex justify-center items-center bg-indigo-lightest-10 white w-l5 h-l5 br-round mb-5"><i
                            data-feather="inbox" class="w-l5"></i></div>
                    <h4 class="white fw-600 fs-m3 mb-5">数字看板</h4>
                    <div class="indigo-lightest fw-600 fs-m1 lh-3 opacity-50">数据看板是一个可视化工具,通过数据可视化,公司可以集成数据信息、监控商业进程、衡量与共享业务结果。</div>
                    <a href="#"
                        class="mt-5 button bg-indigo-lightest-10 fs-s3 white no-underline hover-opacity-100 hover-scale-up-1 ease-300">Read</a>
                </div>
            </div>
            <div class="w-100pc md-w-40pc">
                <div class="br-8 p-5 m-5">
                    <div class="flex justify-center items-center bg-indigo-lightest-10 white w-l5 h-l5 br-round mb-5"><i
                            data-feather="cpu" class="w-l5"></i></div>
                    <h4 class="white fw-600 fs-m3 mb-5">数字驾驶舱</h4>
                    <div class="indigo-lightest fw-600 fs-m1 opacity-50">数字驾驶舱是依托城市大脑中枢算力支撑的数据协同数据化、在线化、智能化的城市管理和服务的全新的一个平台，使城市治理者可以实时掌握一手资料、一手舆情，并且通过分析、比较做出科学精准的决策和判断。</div>
                    <a href="#"
                        class="mt-5 button bg-indigo-lightest-10 fs-s3 white no-underline hover-opacity-100 hover-scale-up-1 ease-300">Read</a>
                </div>
            </div>
            <div class="w-100pc md-w-40pc">
                <div class="br-8 p-5 m-5">
                    <div class="flex justify-center items-center bg-indigo-lightest-10 white w-l5 h-l5 br-round mb-5"><i
                            data-feather="database" class="w-l5"></i></div>
                    <h4 class="white fw-600 fs-m3 mb-5">数字孪生</h4>
                    <div class="indigo-lightest fw-600 fs-m1 opacity-50">数字孪生是一个虚拟模型，用于准确地反映现实中的对象。这个现实对象会配备各种相关传感器，这些传感器产生与现实对象性能相关的数据，如能量输出、温度、天气条件等等。 </div>
                    <a href="#"
                        class="mt-5 button bg-indigo-lightest-10 fs-s3 white no-underline hover-opacity-100 hover-scale-up-1 ease-300">Read</a>
                </div>
            </div>
        </div>
    </section>

    <!-- slider -->
    <section class="relative bg-indigo-lightest-10">
        <div id="slider-1">
            <div class="p-10 md-p-l10 flex justify-center items-center flex-column text-center">
                <h2 class="white fs-l3 fw-900">数字化轨道交通</h2>
                <p class="indigo-lightest fw-600 fs-m1 opacity-30 my-5">通过对站点，轨道传感器进行数据传输；结合3d和轨道交通图。实现轨道交通数字化管理全流程覆盖。 </p>
                <a href="http://wpa.qq.com/msgrd?v=3&uin=2853810243&site=qq&menu=yes" class="button-md bg-indigo white fs-s3 br-4 black fw-600 no-underline m-5">contact us</a>
            </div>
            <div class="p-10 md-p-l10 flex justify-center items-center flex-column text-center">
                <h2 class="white fs-l3 fw-900">智慧园区</h2>
                <p class="indigo-lightest fw-600 fs-m1 opacity-30 my-5">高度融合园区多种数据资源，运用3D技术制作园区三维模型，对园区产业、资产、基础设施、能效、安防等领域的关键指标进行综合监测分析，打造智慧园区管理一张图，实现更加高效科学的园区管理，全面提升园区管理水平。</p>
                <a href="http://wpa.qq.com/msgrd?v=3&uin=2853810243&site=qq&menu=yes" class="button-md bg-indigo white fs-s3 br-4 black fw-600 no-underline m-5">contact us</a>
            </div>
            <div class="p-10 md-p-l10 flex justify-center items-center flex-column text-center">
                <h2 class="white fs-l3 fw-900">智慧旅游</h2>
                <p class="indigo-lightest fw-600 fs-m1 opacity-30 my-5">智慧旅游信息化解决方案，实时显示景区景点地图，人流状况，票务状况。实现一站式景区数字化管理方案。</p>
                <a href="http://wpa.qq.com/msgrd?v=3&uin=2853810243&site=qq&menu=yes" class="button-md bg-indigo white fs-s3 br-4 black fw-600 no-underline m-5">contact us</a>
            </div>
        </div>
        <ul class="absolute list-none w-100pc flex justify-between top-50pc">
            <li><button
                    class="prev ml-10 br-round border-indigo-lightest indigo-lightest  bg-transparent flex justify-center items-center p-2 focus-indigo-lighter outline-none"><i
                        data-feather="chevron-left"></i></button></li>
            <li><button
                    class="next mr-10 br-round border-indigo-lightest indigo-lightest  bg-transparent flex justify-center items-center p-2  focus-indigo-lighter outline-none"><i
                        data-feather="chevron-right"></i></button></li>
        </ul>
    </section>

    <!-- big text -->
    <section class="p-10 md-py-10">
        <div class="w-100pc md-w-70pc mx-auto py-10">
            <h2 class="white fs-l2 md-fs-xl1 fw-900 lh-2">
                数据可视化爆火绝不是一种偶然 <span class="border-b bc-indigo bw-4"> 未来趋势</span> </h2>
        </div>
    </section>

    <!-- product options -->
    <section class="py-l10">
        <div class="flex flex-column md-flex-row md-w-80pc mx-auto">
            <div class="w-100pc md-w-50pc">
                <div class="br-8 p-5 m-5 bg-indigo-lightest-10 pointer hover-scale-up-1 ease-300">
                    <div class="inline-block bg-indigo indigo-lightest br-3 px-4 py-1 mb-10 fs-s4 uppercase">
                        监控指挥中心</div>
                    <div class="indigo-lightest fw-600 fs-m1">监控指挥中心设计范围 <span class="opacity-30">
                           监控指挥中心工程包括:监控指挥中心装修系统、监控指挥中心供配电系统、精密空调系统、综合布线系统、监控指挥中心场地集中监控系统、数字化网络监控系统、门禁系统、气体灭火系统</span> </div>
                    <a href="http://wpa.qq.com/msgrd?v=3&uin=2853810243&site=qq&menu=yes" class="mt-10 button bg-black fs-s3 white no-underline">联系我们</a>
            </div>
            <div class="w-100pc md-w-50pc">
                <div class="br-8 p-5 m-5 bg-indigo-lightest-10  pointer hover-scale-up-1 ease-300">
                    <div class="inline-block bg-indigo indigo-lightest br-3 px-4 py-1 mb-10 fs-s4 uppercase">
                        监控指挥中心</div>
                    <div class="indigo-lightest fw-600 fs-m1">监控指挥中心系统 <span class="opacity-30"> 监控指挥中心系统一般包括大屏拼接显示系统，视频监控系统，智能中央控制系统，视频会议系统，音频系统，语音调度系统，个人移动系统，多媒体信息发布系统，网络系统，UPS配电系统，机房监控系统等系统。通过网络，信号和通信传输，将待监控的前端视频，音频和多媒体信息资源集中到监控指挥中心的综合控制平台进行信息资源共享和统一处理</span> </div>
                    <a href="http://wpa.qq.com/msgrd?v=3&uin=2853810243&site=qq&menu=yes" class="mt-10 button bg-black fs-s3 white no-underline">联系我们</a>

                </div>
            </div>
        </div>
    </section>


    <!-- pricing -->
 <!--   <section id="pricing">
        <div class="p-10 flex flex-wrap">
            <div class="w-100pc md-w-50pc">
                <div class="p-5">
                    <h4 class="white fw-800 fs-l3 mb-5">Lorem Pricing</h4>
                    <div class="indigo-lightest fw-600 fs-m1 opacity-50">Lorem ipsum dolor sit amet, consectetur
                        adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                    <h4 class="white fw-600 fs-m2 mt-10">Companies trusts us.</h4>
                    <div class="flex indigo-lightest opacity-50">
                        <div class="w-25pc">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.78 100" fill="currentColor">
                                <path
                                    d="M63.87,44.07h3V56.2h-3Zm4.19,7.55c0-3,1.84-4.79,4.68-4.79s4.68,1.79,4.68,4.79-1.8,4.8-4.68,4.8S68.06,54.67,68.06,51.62Zm6.35,0c0-1.65-.65-2.62-1.67-2.62s-1.66,1-1.66,2.62.63,2.6,1.66,2.6S74.41,53.3,74.41,51.63Zm4.14,5.17h2.88a1.55,1.55,0,0,0,1.62.9c1.14,0,1.74-.62,1.74-1.52V54.49h-.06A2.84,2.84,0,0,1,82,56.13c-2.19,0-3.64-1.67-3.64-4.54s1.38-4.68,3.68-4.68a2.87,2.87,0,0,1,2.76,1.76h0V47h3V56.1c0,2.19-1.93,3.55-4.78,3.55C80.37,59.65,78.72,58.46,78.55,56.8Zm6.25-5.18c0-1.46-.67-2.38-1.73-2.38s-1.71.91-1.71,2.38.64,2.3,1.71,2.3S84.8,53.1,84.8,51.62Zm4.13,0c0-3,1.84-4.79,4.68-4.79s4.69,1.79,4.69,4.79-1.8,4.8-4.69,4.8S88.93,54.67,88.93,51.62Zm6.35,0c0-1.65-.65-2.62-1.67-2.62S92,50,92,51.63s.63,2.6,1.65,2.6S95.28,53.3,95.28,51.63Zm4.16-6.79A1.53,1.53,0,1,1,101,46.31,1.46,1.46,0,0,1,99.44,44.84Zm0,2.2h3V56.2h-3Zm13.89,4.59c0,3-1.33,4.71-3.61,4.71a2.86,2.86,0,0,1-2.8-1.7h-.06v4.52h-3V47h3v1.64h.06a2.87,2.87,0,0,1,2.78-1.77C112,46.91,113.37,48.63,113.37,51.63Zm-3,0c0-1.46-.67-2.39-1.72-2.39s-1.72.94-1.73,2.39.68,2.38,1.73,2.38S110.33,53.08,110.33,51.63Zm8.15-4.8c2.49,0,4,1.18,4.07,3.07h-2.73c0-.65-.54-1.06-1.37-1.06s-1.2.32-1.2.79.33.62,1,.76l1.92.39c1.83.39,2.61,1.13,2.61,2.52,0,1.9-1.73,3.12-4.28,3.12s-4.22-1.22-4.35-3.09h2.89c.09.68.63,1.08,1.51,1.08s1.28-.29,1.28-.77-.28-.58-1-.73l-1.73-.37c-1.79-.37-2.73-1.32-2.73-2.72C114.39,48,116,46.83,118.48,46.83Zm14.31,9.37H129.9V54.47h-.06a2.61,2.61,0,0,1-2.66,1.91,3.19,3.19,0,0,1-3.36-3.45V47h3v5.24c0,1.09.56,1.67,1.49,1.67a1.53,1.53,0,0,0,1.52-1.73V47h3ZM134.24,47h2.9v1.77h.06a2.66,2.66,0,0,1,2.61-1.94,2.39,2.39,0,0,1,2.55,2h.06a2.82,2.82,0,0,1,2.82-2,2.91,2.91,0,0,1,3,3.12V56.2h-3V50.75c0-1-.45-1.46-1.29-1.46a1.31,1.31,0,0,0-1.31,1.48V56.2h-2.85V50.71c0-.92-.45-1.42-1.27-1.42a1.34,1.34,0,0,0-1.33,1.5V56.2h-3Z" />
                                <path
                                    d="M55.48,44.62a13.25,13.25,0,0,0-2-3.22A13.53,13.53,0,1,0,34.8,60.72,13.09,13.09,0,0,0,38,62.55a13.39,13.39,0,0,0,5.07,1A13.56,13.56,0,0,0,56.6,50,13.39,13.39,0,0,0,55.48,44.62ZM43.06,39.19a10.71,10.71,0,0,1,4.52,1h0a4.39,4.39,0,0,1-1.08.31,5.73,5.73,0,0,0-4.85,4.85A3,3,0,0,1,38.94,48a5.73,5.73,0,0,0-4.85,4.85,2.91,2.91,0,0,1-.79,1.74h0a10.8,10.8,0,0,1,9.77-15.42ZM34.79,57c.12-.11.24-.21.36-.33a5.48,5.48,0,0,0,1.62-3.23,2.92,2.92,0,0,1,.87-1.82,2.83,2.83,0,0,1,1.81-.86,5.73,5.73,0,0,0,4.85-4.85A2.92,2.92,0,0,1,45.17,44,2.87,2.87,0,0,1,47,43.17a5.48,5.48,0,0,0,3-1.43,10.51,10.51,0,0,1,2.36,2.78.86.86,0,0,1-.13.14,2.87,2.87,0,0,1-1.81.88,5.71,5.71,0,0,0-4.85,4.85,3,3,0,0,1-2.69,2.68A5.76,5.76,0,0,0,38,57.92a3.14,3.14,0,0,1-.49,1.37A10.89,10.89,0,0,1,34.79,57Zm8.27,3.86a10.84,10.84,0,0,1-3-.42,5.78,5.78,0,0,0,.64-2,3,3,0,0,1,2.68-2.68,5.73,5.73,0,0,0,4.86-4.85,3,3,0,0,1,2.68-2.68,5.71,5.71,0,0,0,2.56-1A10.82,10.82,0,0,1,43.06,60.81Z" />
                                </svg>
                        </div>
                        <div class="w-25pc">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.78 100" fill="currentColor">
                                <path
                                    d="M46.23,41.39h2V55.31h6v2h-8Zm14.23,0a6,6,0,1,1-6,6A6,6,0,0,1,60.46,41.39Zm0,10a4,4,0,1,0-4-4A4,4,0,0,0,60.46,51.37Zm-4,3.94h8v2h-8Zm25.6,2h-2V55.9a7.69,7.69,0,0,1-4.4,1.39,8,8,0,1,1,6-13.23l-1.47,1.31a6,6,0,1,0-4.46,10,5.77,5.77,0,0,0,4.38-2H74.71v-2l7.37,0Zm7.36-15.9a6,6,0,1,1-6,6A6,6,0,0,1,89.44,41.39Zm0,10a4,4,0,1,0-4-4A4,4,0,0,0,89.44,51.37Zm-4,3.94h8v2h-8ZM97.55,41.39h2v15.9h-2Zm4.77,0,2,0a1.47,1.47,0,0,1,.31,0,6,6,0,1,1,0,11.93h-.31v4h-2Zm2,2v7.91h.31a4,4,0,1,0,0-7.93A1.47,1.47,0,0,0,104.31,43.44Zm14.41-.85-1.48,1.17a1.94,1.94,0,0,0-3.33,1.13V45c0,.88.61,1.47,1.8,1.55,4.58.28,6.68,2.43,6.68,5.27V52a5.9,5.9,0,0,1-10.17,3.42l1.53-1.18a3.6,3.6,0,0,0,2.8,1.14A3.74,3.74,0,0,0,120.48,52v-.14c0-2.67-2.62-3.16-4.89-3.38-2.1-.2-3.61-1.51-3.61-3.4V45a3.85,3.85,0,0,1,3.93-3.56A3.74,3.74,0,0,1,118.72,42.59Zm11.5,12.72c2.49,0,4.46-2.69,4.46-6v-8h2l0,8c0,4.4-2.88,7.95-6.42,7.95s-6.42-3.55-6.42-7.95v-8h2v8C125.77,52.62,127.74,55.31,130.22,55.31Zm21.81,2h-2V47.36l-4.61,6-4.61-6v9.93h-2V41.39l6.6,8.69,6.6-8.69Z" />
                                <path
                                    d="M36.63,39a5.44,5.44,0,0,0-10.88,0V55.45l4.48,3.21v7.82h1.92V58.66l4.48-3.21Zm-1.92,9.2-2.56,2.56v-2.4l2.56-2.56Zm-7-2.4,2.56,2.56v2.4l-2.56-2.56Zm7-2.72-3.52,3.52L27.67,43v-2.4l3.52,3.52,3.52-3.52Zm-3.52-7.6a3.54,3.54,0,0,1,3.4,2.61l-3.4,3.39-3.4-3.39A3.54,3.54,0,0,1,31.19,35.44Zm-3.52,19V50.88l2.56,2.56V56.3Zm4.48,1.83V53.44l2.56-2.56v3.59Z" />
                                </svg>
                        </div>
                        <div class="w-25pc">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.78 100" fill="currentColor">
                                <path
                                    d="M67.88,57.39a2.65,2.65,0,0,1-1.67-.48,1.56,1.56,0,0,1-.63-1.31V46.33a.26.26,0,0,1,.29-.29h1.68c.19,0,.28.1.28.29v8.55c0,.38.17.57.52.57a1.44,1.44,0,0,0,.44-.05c.2,0,.31.06.32.24l.15,1.25a.26.26,0,0,1-.24.31A3.77,3.77,0,0,1,67.88,57.39Z" />
                                <path
                                    d="M77.33,56.32a4.71,4.71,0,0,1-6,0,4,4,0,0,1,0-5.63,4.73,4.73,0,0,1,6,0,4.06,4.06,0,0,1,0,5.62ZM72.91,55a2.13,2.13,0,0,0,2.86,0,2.24,2.24,0,0,0,0-2.94,2.13,2.13,0,0,0-2.86,0,2.24,2.24,0,0,0,0,2.94Z" />
                                <path
                                    d="M87.71,49.87c.19,0,.28.1.28.29v7.17a3.26,3.26,0,0,1-1.11,2.57,4.2,4.2,0,0,1-2.91,1,4.68,4.68,0,0,1-2.71-.75,3,3,0,0,1-1.31-2c0-.2,0-.29.27-.29H81.9a.37.37,0,0,1,.33.23,1.31,1.31,0,0,0,.61.71,2.34,2.34,0,0,0,1.12.26,1.77,1.77,0,0,0,1.29-.46,1.7,1.7,0,0,0,.47-1.25v-.63a3.35,3.35,0,0,1-2.08.65,3.88,3.88,0,0,1-2.84-1.09,4,4,0,0,1,0-5.56,3.91,3.91,0,0,1,2.84-1.08,3.36,3.36,0,0,1,2.13.69v-.16a.26.26,0,0,1,.28-.29Zm-3.88,5.72A1.76,1.76,0,0,0,85.2,55a2.45,2.45,0,0,0,0-3,1.75,1.75,0,0,0-1.36-.58,1.8,1.8,0,0,0-1.39.59,2.12,2.12,0,0,0-.54,1.5A2.16,2.16,0,0,0,82.44,55,1.81,1.81,0,0,0,83.83,55.59Z" />
                                <path
                                    d="M96.62,56.32a4.73,4.73,0,0,1-6,0,4.07,4.07,0,0,1,0-5.63,4.74,4.74,0,0,1,6,0,4.06,4.06,0,0,1,0,5.62ZM92.19,55a2,2,0,0,0,1.44.55A2,2,0,0,0,95.06,55a2.27,2.27,0,0,0,0-2.94,2,2,0,0,0-1.43-.55,2,2,0,0,0-1.44.55,2.27,2.27,0,0,0,0,2.94Z" />
                                <path
                                    d="M101.36,48.17a1.45,1.45,0,0,1-1.91,0,1.21,1.21,0,0,1,0-1.76,1.48,1.48,0,0,1,1.91,0,1.21,1.21,0,0,1,0,1.76Zm.21,9.22a2.69,2.69,0,0,1-1.67-.48,1.58,1.58,0,0,1-.62-1.31V50.16a.26.26,0,0,1,.29-.29h1.68c.19,0,.28.1.28.29v4.72q0,.57.51.57a1.55,1.55,0,0,0,.45-.05c.2,0,.31.06.32.24l.15,1.25a.26.26,0,0,1-.24.31A3.79,3.79,0,0,1,101.57,57.39Z" />
                                <path
                                    d="M109.14,49.63A3.92,3.92,0,0,1,112,50.71a4.1,4.1,0,0,1,0,5.59,3.89,3.89,0,0,1-2.86,1.09,3.44,3.44,0,0,1-2.09-.65v3.61c0,.19-.1.28-.29.28h-1.68a.24.24,0,0,1-.28-.28v-8.2a.52.52,0,0,0-.59-.59l-.33,0q-.33,0-.33-.24V50.14a.32.32,0,0,1,.23-.33,3,3,0,0,1,1.08-.18,1.85,1.85,0,0,1,1.81,1A3.37,3.37,0,0,1,109.14,49.63ZM107.58,55a1.91,1.91,0,0,0,2.76,0,2.16,2.16,0,0,0,.55-1.53,2.13,2.13,0,0,0-.55-1.53,1.91,1.91,0,0,0-2.76,0,2.21,2.21,0,0,0-.53,1.53A2.24,2.24,0,0,0,107.58,55Z" />
                                <path
                                    d="M117.82,57.39a4.82,4.82,0,0,1-2.57-.62A2.44,2.44,0,0,1,114.09,55c0-.2.07-.3.29-.3h1.47a.38.38,0,0,1,.33.22c.21.54.76.81,1.64.81a1.87,1.87,0,0,0,.89-.18.58.58,0,0,0,.34-.49c0-.26-.16-.44-.48-.56a5.41,5.41,0,0,0-1.17-.25A11.12,11.12,0,0,1,116,54a2.3,2.3,0,0,1-1.17-.67,2.14,2.14,0,0,1,.43-3.1,4.12,4.12,0,0,1,2.42-.64,4.42,4.42,0,0,1,2.36.59,2.23,2.23,0,0,1,1.1,1.57q0,.3-.27.3h-1.48a.31.31,0,0,1-.3-.18,1,1,0,0,0-.52-.53,1.76,1.76,0,0,0-.86-.2,1.74,1.74,0,0,0-.85.17.5.5,0,0,0-.32.46.64.64,0,0,0,.48.59,5.42,5.42,0,0,0,1.19.3,13.08,13.08,0,0,1,1.39.26,2.3,2.3,0,0,1,1.17.67,1.89,1.89,0,0,1,.49,1.37,2,2,0,0,1-.93,1.74A4.37,4.37,0,0,1,117.82,57.39Z" />
                                <path
                                    d="M131.83,56.89a.27.27,0,0,1-.23.31,3.86,3.86,0,0,1-1.13.19,2.22,2.22,0,0,1-2-.87,3.62,3.62,0,0,1-2.55.87,3.1,3.1,0,0,1-2.34-.91,3.28,3.28,0,0,1-.89-2.41V50.16c0-.19.09-.29.28-.29h1.68c.19,0,.28.1.28.29v3.61a1.77,1.77,0,0,0,.43,1.23,1.5,1.5,0,0,0,1.15.47,1.66,1.66,0,0,0,1.2-.44,1.6,1.6,0,0,0,.45-1.19V50.16c0-.19.09-.29.28-.29h1.7c.19,0,.28.1.28.29v4.71c0,.39.17.58.5.58a1.58,1.58,0,0,0,.46-.05.26.26,0,0,1,.33.24Z" />
                                <path
                                    d="M147.72,56.89a.25.25,0,0,1-.23.31,3.88,3.88,0,0,1-1.15.19,2.67,2.67,0,0,1-1.67-.48A1.56,1.56,0,0,1,144,55.6V53.25a1.77,1.77,0,0,0-.42-1.23,1.42,1.42,0,0,0-1.12-.47,1.25,1.25,0,0,0-1,.44,1.78,1.78,0,0,0-.38,1.18v3.69c0,.19-.09.29-.28.29h-1.69a.26.26,0,0,1-.29-.29V53.25a1.85,1.85,0,0,0-.39-1.23,1.3,1.3,0,0,0-1-.47,1.45,1.45,0,0,0-1.1.44,1.65,1.65,0,0,0-.41,1.18v3.69a.26.26,0,0,1-.29.29H134c-.19,0-.28-.1-.28-.29V52.15a.52.52,0,0,0-.59-.59l-.33,0q-.33,0-.33-.24V50.14a.32.32,0,0,1,.23-.33,3,3,0,0,1,1.08-.18,1.88,1.88,0,0,1,1.78.92,3.38,3.38,0,0,1,2.54-.92,2.87,2.87,0,0,1,2.37,1.06,3.3,3.3,0,0,1,2.62-1.06,3.16,3.16,0,0,1,2.37.91,3.26,3.26,0,0,1,.89,2.41v1.93c0,.38.17.57.49.57a1.5,1.5,0,0,0,.46-.05q.31,0,.33.24Z" />
                                <path
                                    d="M30.46,48.57a13.69,13.69,0,0,1,26.57,0h-1.2a9.69,9.69,0,0,0-5.67,1.73,2.86,2.86,0,0,1-.3.19h-.14a2.86,2.86,0,0,1-.3-.19,10.17,10.17,0,0,0-11.35,0,2.86,2.86,0,0,1-.3.19h-.14a2.86,2.86,0,0,1-.3-.19,9.69,9.69,0,0,0-5.67-1.73Zm23.21,6.27a3.37,3.37,0,0,1,2.16-.71h1.61V50.92H55.83A6.38,6.38,0,0,0,52,52.14a3.64,3.64,0,0,1-4.32,0,6.8,6.8,0,0,0-7.77,0,3.64,3.64,0,0,1-4.32,0,6.38,6.38,0,0,0-3.88-1.22H30.05v3.21h1.61a3.37,3.37,0,0,1,2.16.71,6.78,6.78,0,0,0,7.76,0,3.39,3.39,0,0,1,2.16-.71,3.35,3.35,0,0,1,2.16.71,6.8,6.8,0,0,0,7.77,0Zm0,5.74a3.37,3.37,0,0,1,2.16-.71h1.61V56.66H55.83A6.38,6.38,0,0,0,52,57.88a3.64,3.64,0,0,1-4.32,0,6.8,6.8,0,0,0-7.77,0,3.64,3.64,0,0,1-4.32,0,6.38,6.38,0,0,0-3.88-1.22H30.05v3.21h1.61a3.37,3.37,0,0,1,2.16.71,6.78,6.78,0,0,0,7.76,0,3.39,3.39,0,0,1,2.16-.71,3.35,3.35,0,0,1,2.16.71,6.8,6.8,0,0,0,7.77,0Z" />
                                </svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-100pc md-w-25pc">
                <div class="m-3 p-5 br-8 bg-indigo-lightest-10 overflow-hidden">
                    <div class="p-3">
                        <h3 class="indigo">Free</h3>
                        <div class="white flex items-center">$<span class="fs-l5 lh-1">0</span>/mo</div>
                    </div>
                    <div class="p-3 indigo-lightest fw-400 fs-s1 lh-5">
                        <div>
                            <i class="h-3 indigo" stroke-width="4" data-feather="check"></i>
                            <span class="opacity-50">1 user</span>
                        </div>
                        <div>
                            <i class="h-3 indigo" stroke-width="4" data-feather="check"></i>
                            <span class="opacity-50">100 visitors/month</span></div>
                        <div>
                            <i class="h-3 indigo" stroke-width="4" data-feather="check"></i>
                            <span class="opacity-50">1 website</span></div>
                        <div>
                            <i class="h-3 indigo" stroke-width="4" data-feather="check"></i>
                            <span class="opacity-50">24x7 support</span></div>
                        <div>
                            <i class="h-3" stroke-width="4" data-feather="x"></i>
                            <span class="opacity-50">third party integration</span></div>
                    </div>
                    <div class="p-3">
                        <button class="button full bg-black white  hover-opacity-100 hover-scale-up-1 ease-300">SIGN
                            UP</button>
                    </div>
                </div>
            </div>
            <div class="w-100pc md-w-25pc">
                <div class="m-3 p-5 br-8 bg-white overflow-hidden">
                    <div class="p-3">
                        <h3 class="indigo">Pro</h3>
                        <div class="black flex items-center">$<span class="fs-l5 lh-1">99</span>/mo</div>
                    </div>
                    <div class="p-3 black fw-400 fs-s1 lh-5">
                        <div>
                            <i class="h-3 indigo" stroke-width="4" data-feather="check"></i>
                            <span class="opacity-50"> 5 user</span></div>
                        <div>
                            <i class="h-3 indigo" stroke-width="4" data-feather="check"></i>
                            <span class="opacity-50">10,000 visitors/month</span></div>
                        <div>
                            <i class="h-3 indigo" stroke-width="4" data-feather="check"></i>
                            <span class="opacity-50">3 website</span></div>
                        <div>
                            <i class="h-3 indigo" stroke-width="4" data-feather="check"></i>
                            <span class="opacity-50">24x7 support</span></div>
                        <div>
                            <i class="h-3 indigo" stroke-width="4" data-feather="check"></i>
                            <span class="opacity-50">third party integration</span></div>
                    </div>
                    <div class="p-3">
                        <button class="button full bg-indigo white hover-opacity-100 hover-scale-up-1 ease-300">SIGN
                            UP</button>
                    </div>
                </div>
            </div>
        </div>
    </section> -->

    <!-- testimonials -->
   <!-- <section class="p-10 md-p-l5">
        <div id="slider-2">
            <div class="px-3">
                <div class="p-8 br-8 bg-indigo-lightest-10 relative">
                    <span class="fs-l5 lh-1 white opacity-10 absolute top-0 z--1">&#10077;</span>
                    <p class="fw-600 fs-m1 indigo-lightest opacity-80 italic ls-wider">Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do eiusmod tempor </p>
                    <div class="flex items-center my-5">
                        <div class="block br-round border bc-black bw-4 w-l3 h-l3"><img class="br-round"
                                src="https://randomuser.me/api/portraits/men/46.jpg" alt=""></div>
                        <div class="ml-4 fs-s1">
                            <div class="indigo-lightest">Mahnaz Farzin</div>
                            <div class="indigo-lightest opacity-20">Product Manager, XYZ</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="px-3">
                <div class="p-8 br-8 bg-indigo-lightest-10 relative">
                    <span class="fs-l5 lh-1 white opacity-10 absolute top-0 z--1">&#10077;</span>
                    <p class="fw-600 fs-m1 indigo-lightest opacity-80 italic ls-wider">Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do eiusmod tempor </p>
                    <div class="flex items-center my-5">
                        <div class="block br-round border bc-black bw-4 w-l3 h-l3"><img class="br-round"
                                src="https://randomuser.me/api/portraits/men/46.jpg" alt=""></div>
                        <div class="ml-4 fs-s1">
                            <div class="indigo-lightest">Mahnaz Farzin</div>
                            <div class="indigo-lightest opacity-20">Product Manager, XYZ</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="px-3">
                <div class="p-8 br-8 bg-indigo-lightest-10 relative">
                    <span class="fs-l5 lh-1 white opacity-10 absolute top-0 z--1">&#10077;</span>
                    <p class="fw-600 fs-m1 indigo-lightest opacity-80 italic ls-wider">Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do eiusmod tempor </p>
                    <div class="flex items-center my-5">
                        <div class="block br-round border bc-black bw-4 w-l3 h-l3"><img class="br-round"
                                src="https://randomuser.me/api/portraits/men/46.jpg" alt=""></div>
                        <div class="ml-4 fs-s1">
                            <div class="indigo-lightest">Mahnaz Farzin</div>
                            <div class="indigo-lightest opacity-20">Product Manager, XYZ</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="px-3">
                <div class="p-8 br-8 bg-indigo-lightest-10 relative">
                    <span class="fs-l5 lh-1 white opacity-10 absolute top-0 z--1">&#10077;</span>
                    <p class="fw-600 fs-m1 indigo-lightest opacity-80 italic ls-wider">Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do eiusmod tempor </p>
                    <div class="flex items-center my-5">
                        <div class="block br-round border bc-black bw-4 w-l3 h-l3"><img class="br-round"
                                src="https://randomuser.me/api/portraits/men/46.jpg" alt=""></div>
                        <div class="ml-4 fs-s1">
                            <div class="indigo-lightest">Mahnaz Farzin</div>
                            <div class="indigo-lightest opacity-20">Product Manager, XYZ</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section> -->

    <!-- featured blog -->
    <section class="p-10 md-p-l10">
        <div class="md-w-75pc">
            <h2 class="white fs-l3 fw-900 lh-1">数字化大屏经典案例·优雅草</h2>
            <p class="indigo-lightest fw-600 fs-m1 opacity-50 my-5">智慧乡村·智慧排污系统 </p>
        </div>
        <div class="relative w-100pc h-75vh bg-cover bg-b"
            style="background-image: url(assets/images/xiangcun.png);">
            <a href="#"
                class="bg-white black px-5 py-3 absolute right-0 bottom-0 hover-bg-black hover-white ease-500 flex justify-center items-center after-arrow-right no-underline fs-m1"></a>
        </div>

    </section>

    <!-- blog -->
    <section class="p-0 md-p-5" id="case">
        <div class="flex flex-wrap">
            <div class="w-100pc md-w-33pc p-10">
                <a href="#" class="block no-underline p-5 br-8 hover-bg-indigo-lightest-10 hover-scale-up-1 ease-300">
                    <img class="w-100pc" src="assets/images/huanbao.jpg" alt="">
                    <p class="fw-600 white fs-m3 mt-3">
                       环保监控可视化系统
                    </p>
                    <div class="indigo fs-s3 italic after-arrow-right my-4">智慧环保</div>
                </a>
            </div>
            <div class="w-100pc md-w-33pc p-10">
                <a href="#" class="block no-underline p-5 br-8 hover-bg-indigo-lightest-10 hover-scale-up-1 ease-300">
                    <img class="w-100pc" src="assets/images/dianqi.jpg" alt="">
                    <p class="fw-600 white fs-m3 mt-3">
                       智慧电气
                    </p>
                    <div class="indigo fs-s3 italic after-arrow-right my-4">智慧电气</div>
                </a>
            </div>
            <div class="w-100pc md-w-33pc p-10">
                <a href="#" class="block no-underline p-5 br-8 hover-bg-indigo-lightest-10 hover-scale-up-1 ease-300">
                    <img class="w-100pc" src="assets/images/xiangcun2.png" alt="">
                    <p class="fw-600 white fs-m3 mt-3">
                       智慧乡村·智慧排污系统
                    </p>
                    <div class="indigo fs-s3 italic after-arrow-right my-4">智慧乡村</div>
                </a>
            </div>

        </div>
    </section>

    <!-- subscribe -->
   <!-- <section class="p-10 md-p-l5">
        <div class="br-8 bg-indigo-lightest-10 p-5 md-p-l5 flex flex-wrap md-justify-between md-items-center">
            <div class="w-100pc md-w-33pc">
                <h2 class="white fs-m4 fw-800">Try Hook today</h2>
                <p class="fw-600 indigo-lightest opacity-40">Get first month free for commercial use. Forever free for
                    open source products.</p>
            </div>
            <div class="w-100pc md-w-50pc">
                <div class="flex my-5">
                    <input type="text"
                        class="input-lg flex-grow-1 bw-0 fw-200 bg-indigo-lightest-10 white ph-indigo-lightest focus-white opacity-80 fs-s3 py-5 br-r-0"
                        placeholder="Email Address">
                    <button class="button-lg bg-indigo indigo-lightest fw-300 fs-s3 br-l-0">Get Started</button>
                </div>
            </div>
        </div>
    </section> -->

    <!-- footer -->
    <footer class="p-5 md-p-l5 bg-indigo-lightest-10">
        <div class="flex flex-wrap">
            <div class="md-w-25pc mb-10">
                <img src="https://songshu.youyacao.com/qingtingz/static/picture/logo-transparent.png" class="w-l5" alt="">
                <div class="white opacity-70 fs-s2 mt-4 md-pr-10">
                    <p>成都市一颗优雅草科技有限公司2015年成立以来一直从事于网站设计、制作、APP研发、系统开发等；集研发、销售、服务于 一体，与此同时，我们一直在 技术和应用上进行创新和突破，2019年自研发松鼠系列系统，2020年发布蜻蜓系列系统，持续在大数据，人脸识别，内容算法，云计算产品，中间件开发与对接与服务，图像算法等人工智能领域研究</p>
                    <br>
                    <p>2021年将持续提升技术并发布更领先的产品，力争上游 努力奋斗，2022年新开拓散仙建模，松鼠拍视频两条业务线，2022年7月起重心转移至大型行业应用软件，工业软件。</p>
                </div>
            </div>
            <div class="w-100pc md-w-50pc">
                <div class="flex justify-around">
                    <div class="w-33pc md-px-10 mb-10">
                        <h5 class="white">公司介绍</h5>
                        <ul class="list-none mt-5 fs-s2">
							
							
                            <li class="my-3"><a href="https://doc.youyacao.com/web/#/22/1028" class="white opacity-70 no-underline hover-underline">关于我们</a></li>
                            <li class="my-3"><a href="https://doc.youyacao.com/web/#/22/1060" class="white opacity-70 no-underline hover-underline">国家重点软件企业</a>
                            </li>
							
							<li class="my-3"><a href="https://doc.youyacao.com/web/#/22/1297" class="white opacity-70 no-underline hover-underline">国家级高新技术企业</a>
							</li>
                            <li class="my-3"><a href="https://doc.youyacao.com/web/#/22/867"
                                    class="white opacity-70 no-underline hover-underline">软件产品企业</a></li>
                            <li class="my-3"><a href="https://doc.youyacao.com/web/#/22/1202" class="white opacity-70 no-underline hover-underline">ISO9001质量认证</a>
							                 <li class="my-3"><a href="https://doc.youyacao.com/web/#/22/710" class="white opacity-70 no-underline hover-underline">AAA信誉企业</a>
											                  <li class="my-3"><a href="https://doc.youyacao.com/web/#/22/1023" class="white opacity-70 no-underline hover-underline">科技中小企业</a>
                            </li>
                        </ul>
                    </div>
                    <div class="w-33pc md-px-10 mb-10">
                        <h5 class="white">产品</h5>
                        <ul class="list-none mt-5 fs-s2">
                            <li class="my-3"><a href="https://songshu.youyacao.com/z.html" class="white opacity-70 no-underline hover-underline">蜻蜓Z系统</a></li>
                            <li class="my-3"><a href="https://songshu.youyacao.com/chat.html" class="white opacity-70 no-underline hover-underline">蜻蜓I即时通讯</a>
                            </li>
                            <li class="my-3"><a href="https://songshu.youyacao.com/k.html"
                                    class="white opacity-70 no-underline hover-underline">蜻蜓K知识付费</a></li>
                            <li class="my-3"><a href="https://songshu.youyacao.com/stq.html" class="white opacity-70 no-underline hover-underline">蜻蜓Q旗舰版</a>
                            </li>
                        </ul>
                    </div>
                    <div class="w-33pc md-px-10 mb-10">
                        <h5 class="white">支持</h5>
                        <ul class="list-none mt-5 fs-s2">
                            <li class="my-3"><a href="https://doc.youyacao.com/web/#/22/1172" class="white opacity-70 no-underline hover-underline">骨干成员</a></li>
                            <li class="my-3"><a href="https://doc.youyacao.com/web/#/22/1027" class="white opacity-70 no-underline hover-underline">加入我们</a>
                            </li>
                            <li class="my-3"><a href="https://doc.youyacao.com/web/#/22/1024"
                                    class="white opacity-70 no-underline hover-underline">联系我们</a></li>
                      
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="w-100pc md-w-25pc">
           <!--     <div class="flex w-75pc md-w-100pc mx-auto">
                    <input type="text"
                        class="input flex-grow-1 bw-0 fw-200 bg-indigo-lightest-10 white ph-indigo-lightest focus-white opacity-80 fs-s3 py-5 br-r-0"
                        placeholder="Email Address">
                    <button class="button bg-indigo indigo-lightest fw-300 fs-s3 br-l-0">Start</button>
                </div> -->
                <div class="flex justify-around my-8">
                    <a href="#" class="relative p-5 bg-indigo br-round white hover-scale-up-1 ease-400"><i
                            data-feather="twitter" class="absolute-center h-4"></i></a>
                    <a href="#" class="relative p-5 bg-indigo br-round white hover-scale-up-1 ease-400"><i
                            data-feather="facebook" class="absolute-center h-4"></i></a>
                    <a href="#" class="relative p-5 bg-indigo br-round white hover-scale-up-1 ease-400"><i
                            data-feather="instagram" class="absolute-center h-4"></i></a>
                </div>
            </div>
        </div>
    </footer>
	
<!-- 	<a class="fixed top-50pc right-0 p-3 bg-indigo white hover-scale-up-1 ease-300 no-underline" href="#navtop" target="_blank" >
	    <i class="w-4" data-feather="upload"></i>
	</a> -->
   <a class="fixed top-50pc right-0 p-3 bg-indigo white hover-scale-up-1 ease-300 no-underline" href="#case" target="_blank" >
        <i class="w-4" data-feather="download"></i>
    </a>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15.0.0/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="assets/js/script.js"></script>
</body>

</html>